<template>
    <div>
      <!-- 双击图片打开 ImageViewer -->
      <img 
        @dblclick="onImageDblClick" 
        :src="imageSrc" 
        alt="Thumbnail" 
        style="cursor: pointer;" 
      />
  
      <!-- ImageViewer 组件 -->
      <image-viewer 
        ref="imageViewer"
        :image-src="selectedImageSrc"
      />
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import ImageViewer from './ImageViewer.vue'
  
  import imageSrc from '@/assets/logo-new.png'
  
  // 当前选中的图片路径
  const selectedImageSrc = ref(null)
  // 引用子组件
  const imageViewer = ref(null)
  
  // 双击图片时打开 ImageViewer
  const onImageDblClick = () => {
    console.log('Image double-clicked, opening viewer...')
    selectedImageSrc.value = imageSrc
    console.log('Selected image source:', selectedImageSrc.value)
    
    // 直接调用子组件中的 openImageViewer 方法
    if (imageViewer.value && typeof imageViewer.value.openImageViewer === 'function') {
      imageViewer.value.openImageViewer()
    }
  }
  </script>